<template>
    <div class="page">
        <div class="pro-detail-header">
            <div v-if="defaultHeadOpacity!=0" class="pro-default-head" :style="{zIndex:3,opacity:defaultHeadOpacity}">
                <a class="pro-share-default pull-right" href="javascript:;" @click="show(3)"></a>
                <a href="javascript:;" class="pro-back-default" @click="back"></a>
            </div>
            <div v-if="headOpacity!=0" class="pro-scroll-head flexbox items-center justify-center" :style="{zIndex:2,opacity:headOpacity}">
                <a href="javascript:;" class="pro-back-black" @click="back"></a>
                <ul>
                    <li :class="{'current':activeIndex===0}" @click="slideTo(0)">商品</li>
                    <li :class="{'current':activeIndex===1}" @click="slideTo(1)">详情</li>
                    <li :class="{'current':activeIndex===2}" @click="slideTo(2)">评价</li>
                </ul>
                <a class="pro-share-black" href="javascript:;" @click="show(3)"></a>
            </div>
        </div>
        <div class="pro-detail" v-if="info.length!==0">
            <swiper :options="myswiper" ref="myswiper">
                <swiper-slide>
                    <div class="pro-detail-info">
                        <swiper :options="mythumbs" ref="mythumbs">
                            <swiper-slide v-for="item in info.thumbs" :key="item">
                                <img class="img-responsive" :src="item" style="width:100%">
                            </swiper-slide>
                            <div class="swiper-pagination" slot="pagination"></div>
                        </swiper>
                        <div class="pro-detail-name">
                            <h2 class="pro-name" v-text="info.pname"></h2>
                            <div class="pro-price flexbox items-center">
                                <div class="price">{{info.price | Currency}}</div>
                                <div class="pro-like">{{info.likeCount}}人</div>
                            </div>
                        </div>
                        <div class="pro-select" @click="show(1)">
                            <p v-if="attrName">
                                已选择:
                                <span v-text="attrName"></span>
                            </p>
                            <p v-else>
                                选择:
                                <span v-text="info.classifyName"></span>
                            </p>
                        </div>
                        <div class="pro-select" @click="show(2)">商品参数</div>
                        <div class="pro-banner">
                            <a href="javascript:;">
                                <img class="img-responsive" :src="info.proBanner.thumb" style="width:100%">
                            </a>
                        </div>
                        <div class="pro-select pro-review">
                            <a href="javascript:;" class="pull-right">暂无评价</a>
                            评价
                        </div>
                        <div class="pro-seller flexbox items-center">
                            <div class="seller-logo">
                                <img class="img-responsive" :src="info.proSeller.thumb">
                            </div>
                            <div class="seller-name" v-text="info.proSeller.name"></div>
                            <div class="seller-link">进入店铺</div>
                        </div>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="pro-detail-description" v-html="info.detail"></div>
                </swiper-slide>
                <swiper-slide>
                    <div class="pro-detail-reviews">
                        <div class="empty">
                            <div class="empty-reviews"></div>
                            暂无更多评价~
                        </div>
                    </div>
                </swiper-slide>
            </swiper>
        </div>
        <div class="pro-footer flexbox">
            <div class="pro-icons">
                <a href="javascript:;" @click="like">
                    <i class="like-icon" :class="{'like-icon-checked':likeChecked}"></i>
                </a>
                <router-link to="/cart">
                    <i class="cart-icon"></i>
                </router-link>
            </div>
            <div class="pro-btn">
                <a href="javascript:;" class="cart" @click="cart">加入购物车</a>
                <a href="javascript:;" class="buy" @click="buy">立即购买</a>
            </div>
        </div>
        <mt-popup v-model="popupShow" position="bottom">
            <!--商品参数弹窗-->
            <div v-if="popupInformation" class="pro-information-pop w100">
                <div class="title">商品参数</div>
                <ul>
                    <li v-for="(item,index) in info.information" :key="index">
                        <span v-text="item.title"></span>{{item.value}}
                    </li>
                </ul>
                <div class="conform-btn">
                    <a href="javascript:;" @click="close">确定</a>
                </div>
            </div>
            <!--选项弹窗-->
            <div v-if="popupProSelect" class="pro-buy-pop w100">
                <a href="javascript:;" class="close" @click="close">×</a>
                <div class="pro-buy-info">
                    <div class="thumb">
                        <img class="img-responsive row" :src="info.proBuyBody.proSmallImg">
                    </div>
                    <div class="pro-basic">
                        <div class="price">{{info.price | Currency}}</div>
                        <p>库存：{{info.stockCount}} 件</p>
                        <p v-if="attrName">已选择：{{attrName}}</p>
                        <p v-else>请选择商品规格</p>
                    </div>
                    <div class="sku-list-wrap">
                        <ul>
                            <li v-for="(item,index) in info.proBuyBody.classlist" :key="index">
                                <h2>{{item.cpname}}</h2>
                                <div class="items">
                                    <a href="javascript:;" v-for="(attr,index) in item.child" :class="{'current':checked(item.cpid,attr.claid)}" :data-value="attr.data" v-text="attr.data" @click="select(item.cpid,attr.claid,$event)" :key="index"></a>
                                </div>
                            </li>
                            <li>
                                <h2>购买数量</h2>
                                <div class="edit-quantity number flexbox">
                                    <button class="decrease" @click="updateCount(false)">-</button>
                                    <input type="number" id="number" :value="buyCount" @keyup="checkNumber($event)">
                                    <button class="increase" @click="updateCount(true)">+</button>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="pro-footer">
                    <a href="javascript:;" class="cart" @click="cart">加入购物车</a>
                    <a href="javascript:;" class="buy" @click="buy">立即购买</a>
                </div>
            </div>
            <!--分享弹窗-->
            <div v-if="popupShare" class="share-box-warp">
                <div class="share-box-list">
                    <ul class="flexbox">
                        <li>
                            <a class="icons-wechat" href="javascript:;">
                                <span>微信</span>
                            </a>
                        </li>
                        <li>
                            <a class="icons-qq" href="javascript:;">
                                <span>QQ</span>
                            </a>
                        </li>
                        <li>
                            <a class="icons-sina" href="javascript:;">
                                <span>新浪微博</span>
                            </a>
                        </li>
                        <li>
                            <a class="icons-qzone" href="javascript:;">
                                <span>QQ空间</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="share-cancle" @click="close">取消</div>
            </div>
        </mt-popup>
    </div>
</template>
<script>
import mixin from "@/mixin";
export default {
  data() {
    return {
      info: [], // 商品信息
      attrArray: {}, //已选商品规格claid
      attrName: "", // 选中规格名
      toslide: false, // 缩略图滑动到最后一张，如继续左滑动 切换到详情页
      buyCount: 1,
      likeChecked: false,

      // 页面整体滑动【商品，详情，评论】
      myswiper: {
        loop: false,
        autoPlay: 0,
        autoHeight: true,
        onTransitionStart: swiper => {
          this.activeIndex = swiper.activeIndex;
          if (swiper.activeIndex != 0) {
            this.defaultHeadOpacity = 0;
            this.headOpacity = 1;
          }
        },
        onTransitionEnd: swiper => {
          this.toTop();
          if (swiper.activeIndex == 0) {
            if (window.scrollY > 100) {
              window.addEventListener("scroll", () => {
                this.setOpacity();
              });
            } else {
              this.defaultHeadOpacity = 1;
              this.headOpacity = 0;
            }
          }
        }
      },

      //商品页 头部缩略图滑动
      mythumbs: {
        pagination: ".swiper-pagination",
        paginationType: "fraction",
        onTransitionEnd: swiper => {
          var sw = this.swiper2.activeIndex;
          var len = this.info.thumbs.length - 1;
          if (this.toslide && sw === len) {
            this.toslide = false;
            this.swiper.slideTo(1, 500);
          } else if (sw === len) {
            this.toslide = true;
          } else {
            this.toslide = false;
          }
        }
      },
      defaultHeadOpacity: 1, // 默认显示的头部
      headOpacity: 0, // 滚动及切换页面显示的头部
      activeIndex: 0, // 头部swiper选项卡当前项
      popupShow: false, // 是否显示弹窗
      popupProSelect: false, // 商品选项弹窗
      popupInformation: false, // 商品描述弹窗
      popupShare: false // 分享弹窗
    };
  },
  mixins: [mixin],
  computed: {
    swiper() {
      return this.$refs.myswiper.swiper;
    },
    swiper2() {
      return this.$refs.mythumbs.swiper;
    }
  },
  methods: {
    // 请求数据
    load_product_detail() {
      this.api.get_product_detail().then(response => {
        this.info = response.data.product;
      });
    },

    // 设置头部透明度
    setOpacity() {
      window.addEventListener("scroll", () => {
        if (this.activeIndex == 0) {
          this.defaultHeadOpacity =
            1 - window.scrollY / 100 <= 0 ? 0 : 1 - window.scrollY / 100;
          this.headOpacity =
            window.scrollY / 100 <= 1 ? window.scrollY / 100 : 1;
        }
      });
    },

    // swiper跳转
    slideTo(index) {
      this.activeIndex = index;
      this.swiper.slideTo(index, 500);
      if (index != 0) {
        this.defaultHeadOpacity = 0;
        this.headOpacity = 1;
      }
    },

    // 要显示的弹窗内容 popupInformation：商品参数。popupProSelect： 选择属性  showShare: 分享
    showPop(showInformation, showSelect, showShare) {
      this.popupInformation = showInformation;
      this.popupProSelect = showSelect;
      this.popupShare = showShare;
    },

    // 弹窗 1 选择弹出，2 商品参数弹窗
    show(type) {
      if (type === 1) {
        this.showPop(false, true, false);
      } else if (type == 2) {
        this.showPop(true, false, false);
      } else {
        this.showPop(false, false, true);
      }
      this.popupShow = true;
    },

    //关闭弹窗
    close() {
      this.popupShow = false;
    },
    // 选择商品属性
    select(cpid, claid, event) {
      // 如有key，且值等于当前值，赋值为0【0为未选中】
      if (this.attrArray[cpid] && this.attrArray[cpid] == claid) {
        this.$set(this.attrArray, cpid, 0);
      } else {
        this.$set(this.attrArray, cpid, claid);
      }

      var selectedName = [];
      for (var key in this.attrArray) {
        if (this.attrArray[key] == 0) continue;
        selectedName.unshift(
          this.info.proBuyBody.attribute[this.attrArray[key]].data
        );
      }
      this.attrName = selectedName.join(" ");
    },

    // 选中某属性 添加当前高亮
    checked(cpid, claid) {
      // 如果有key，且选择的值等于当前claid值
      if (this.attrArray[cpid] && this.attrArray[cpid] == claid) {
        return true;
      } else {
        return false;
      }
    },

    // 购买数量 增加 减少
    checkNumber(e) {
      var keyCode = e.keyCode;
      if (
        (keyCode >= 48 && keyCode <= 57) ||
        (keyCode >= 96 && keyCode <= 105)
      ) {
        this.buyCount = e.target.value = parseInt(e.target.value);
      } else {
        e.target.value = 1;
      }
    },
    updateCount(flag) {
      if (flag) {
        this.buyCount += 1;
      } else {
        if (this.buyCount <= 1) return false;
        this.buyCount -= 1;
      }
    },
    addCheck(fn) {
      var product = this.info.proBuyBody.classlist;
      var msg = [];
      for (var i = 0; i < product.length; i++) {
        if (!this.attrArray[product[i].cpid]) {
          msg.unshift(product[i].cpname);
        }
      }
      if (msg.length) {
        if (this.popupShow) {
          this.$Toast({
            message: "请选择" + msg.join("、"),
            duration: 2000
          });
        } else {
          this.popupShow = true;
          this.showPop(false, true, false);
        }
      } else {
        this.popupShow = false;
        this.showPop(false, false, false);
        if (typeof fn === "function") {
          fn();
        }
      }
    },
    cart() {
      this.addCheck(() => {
        this.$Toast("加入购物车成功");
      });
    },
    buy() {
      this.addCheck(() => {
        this.$router.push({ path: "/cart" });
      });
    },
    like() {
      if (this.likeChecked) {
        this.$Toast("已取消收藏");
      } else {
        this.$Toast("收藏成功");
      }
      this.likeChecked = !this.likeChecked;
    }
  },
  created() {
    // 初始化数据
    this.load_product_detail();
  },
  mounted() {
    this.setOpacity();
  }
};
</script>
<style src="@/assets/scss/detail.scss" lang="scss"></style>
